<template>
    <div class="house-document kpi-content-wrapper">
        <div class="kpi-select-wrapper"> <!-- 组织下拉框 -->
            <el-select v-model="curOrg" placeholder="请选择组织" size="small" class="kpi-select">
                <el-option v-for="option in orgOptions" :label="option.name" :value="option.id" :key="option.id"></el-option>
            </el-select>
            <el-select v-model="curYear" placeholder="请选择年度" size="small" class="kpi-select" style="margin-left: 16px;">
                <el-option v-for="(year, idx) in years" :label="year" :value="year" :key="`year_${idx}`"></el-option>
            </el-select>
        </div>
        <div class="house-document-main">
            <div class="house-document-left">
                <ul class="house-info"> <!-- 房屋信息 -->
                    <li class="house-area-size">
                        <img :src="zgmj" />
                        <div class="house-data-item">
                            <h4>{{fixBigData(houseInfo.zgmj)}}</h4>
                            <p>管理面积(平方米)</p>
                        </div>
                    </li>
                    <li class="house-room-num">
                        <img :src="fuhs" />
                        <div class="house-data-item">
                            <h4>{{fixBigData(houseInfo.fuhs)}}</h4>
                            <p>服务户数(户)</p>
                        </div>
                    </li>
                </ul>
                <div class="house-rates">
                    <div class="house-rate-item">
                        <img :src="kzl" />
                        <div class="house-rate-data">
                            <h4>{{houseRates.kzl}}%</h4>
                            <p class="kzl">空置率</p>
                        </div>
                        <div class="house-rate-progress">
                            <div class="house-rate-bg">
                                <el-progress class="cus-house-rate" :stroke-width="8" :show-text="false" color="#f66677" :percentage="50"></el-progress>
                            </div>                            
                        </div>
                    </div>
                    <div class="house-rate-item">
                        <img :src="rzl" />
                        <div class="house-rate-data">
                            <h4>{{houseRates.rzl}}%</h4>
                            <p class="rzl">入住率</p>
                        </div>
                        <div class="house-rate-progress">
                            <div class="house-rate-bg">
                                <el-progress class="cus-house-rate" :stroke-width="8" :show-text="false" color="#00adbe" :percentage="50"></el-progress>
                            </div>                            
                        </div>
                    </div>
                    <div class="house-rate-item">
                        <img :src="cwpb" />
                        <div class="house-rate-data">
                            <h4>{{houseRates.cwpb}}%</h4>
                            <p class="cwpb">车位配比</p>
                        </div>
                        <div class="house-rate-progress">
                            <div class="house-rate-bg">
                                <el-progress class="cus-house-rate" :stroke-width="8" :show-text="false" color="#1e85f8" :percentage="50"></el-progress>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="house-document-right">
                <tipChart :chartData="chartData" v-if="chartData.echartData.length" />
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import tipChart from './child/tipChart';
    const zgmj = require('./imgs/zgmj.png');
    const fuhs = require('./imgs/fuhs.png');

    const kzl = require('./imgs/kzl.png'); // 空置率
    const rzl = require('./imgs/rzl.png'); // 入住率
    const cwpb = require('./imgs/cwpb.png'); // 车位配比

    function fixBigData(bigNum) { // 给大数据加,分隔
        if (!bigNum) return ''
        let reg = /\B(?=(\d{3})+\b)/g;
        return bigNum.toString().replace(reg, ',');
    }

    export default {
        name: 'houseDocument',
        components: {
            tipChart
        },
        data() {
            return {
                zgmj,
                fuhs,
                kzl,
                rzl,
                cwpb,
                curOrg: '',
                orgOptions: [], // 机构列表
                curYear: 2020,
                years: [2015, 2016, 2017, 2018, 2019, 2020],
                houseInfo: {
                    zgmj: 2148721,
                    fuhs: 3765989
                },
                houseRates: {
                    kzl: '67.22',
                    rzl: '32.78',
                    cwpb: '89.99'
                },
                chartData: {
                    title: '房屋状态',
                    echartData: []
                }
            }
        },
        mounted() {
            this.getOrgOptions();
            this.getChartData();
        },
        methods: {
            fixBigData,
            getOrgOptions() {
                this.orgOptions = [
                    { id: '5801', name: '天苑花园' },
                    { id: '583', name: '银河世纪集团' }
                ];
            },
            async getChartData() { // 房屋状态的图表的数据
                /* let params = {
                    appId: '134',
                    memberId: '2167', //this.$utils.getCookie('work_orgMemberId'),
                    tenantId: '1025' // this.$utils.getCookie('work_orgId') // 租户Id从哪获取
                };
                let res = await this.$Geting(this.$api.agingAnalysis, params);
                if (res.code === '0') {
                    console.log(res.data);
                    let resData = res.data;
                    let tempArr = [{
                            name: "3个月内",
                            value: resData.oneThreeMoney * 1
                        },
                        {
                            name: "4~6个月",
                            value: resData.fourSixMoney * 1
                        },
                        {
                            name: "7~12个月",
                            value: resData.sevenOneMoney * 1
                        },
                        {
                            name: "1~2年",
                            value: resData.oneTwoMoney * 1
                        },
                        {
                            name: "2~3年",
                            value: resData.twoThreeMoney * 1
                        },
                        {
                            name: "3年以上",
                            value: resData.threeMoreMoney * 1
                        }
                    ];
                    this.agingChartData = tempArr;
                } */
                let params = {
                    nodeId: 3884,
                    nodeType: 1,
                    layer: 0,
                    appId: 1343,
                    memberId: 2167,
                    tenantId: 1025,
                    year: 2020
                };
                this.$Geting(this.$api.getHouseReportData, params).then((res) => {
                    console.log(res);                    
                });
                this.chartData = {
                    title: '房屋状态',
                    echartData: [
                        { name: '已入住', value: 12.22 },
                        { name: '未售空置', value: 9.78 },
                        { name: '已售未收', value: 6.33 },
                        { name: '已收未装', value: 4.21 },
                        { name: '已装修', value: 2.37 }
                    ]
                }
            },
        }
    }
</script>

<style lang="scss">
.house-document {
    height: 100%;
    .kpi-select-wrapper { // 上面的select部分
        margin-bottom: 20px;
    }
    .house-document-main {
        display: flex;
        height: calc(100% - 52px);
        .house-document-left {
            width: 738px;
            .house-info {
                display: flex;
                li {
                    flex: 1;
                    border-radius: 4px;
                    background-color: #f7f8fa;
                    display: flex;
                    align-items: center;
                    padding: 40px 24px;
                    box-sizing: border-box;                    
                    &.house-area-size {
                        margin-right: 10px;
                        p::before {
                            background-color: #027aff;
                        }                       
                    }
                    &.house-room-num {
                        h4 {
                            color: #e6710a;
                        }
                        p::before {
                            background-color: #e6710a;
                        }
                    }
                    img {
                        margin-right: 16px;
                        user-select: none;
                    }
                    h4 {
                        height: 48px;
                        line-height: 48px;
                        font-size: 32px;
                        font-weight: 700;
                        color: #027aff;
                    }
                    p {
                        height: 24px;
                        line-height: 24px;
                        color: rgba(0,0,0,0.85);
                        position: relative;
                        padding-left: 16px;
                        &::before {
                            content: '';
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            margin-top: -4px;
                        }                        
                    }
                }
            }
            .house-rates {
                margin-top: 40px;
                // 房屋的比例数据
                .house-rate-item {
                    display: flex;
                    margin-bottom: 30px;
                    align-items: center;
                    height: 56px;
                    padding-left: 24px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    img {
                        margin-right: 16px;
                        user-select: none;
                    }
                    .house-rate-data { // 中间的比例数据
                        width: 120px;                        
                        h4 {
                            height: 28px;
                            line-height: 28px;
                            font-size: 24px;
                            font-weight: 700;
                            color: #051b33;
                        }
                        p {
                            height: 22px;
                            line-height: 22px;
                            color: rgba(0,0,0,0.65);
                            position: relative;
                            padding-left: 16px;
                            &::before {
                                content: '';
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                position: absolute;
                                left: 0;
                                top: 50%;
                                margin-top: -4px;
                            }
                            &.kzl {
                                &::before {
                                    background-color: #f66677;
                                }
                            }
                            &.rzl {
                                &::before {
                                    background-color: #00adbe;
                                }
                            }
                            &.cwpb {
                                &::before {
                                    background-color: #1e85f8;
                                }
                            }
                        }
                    }
                    .house-rate-progress {
                        flex: 1;
                        .house-rate-bg {
                            background: #f7f8fa;
                            border-radius: 20px;
                            padding: 7px 0;
                        }
                    }                    
                }
            }
            
        }
        .house-document-right {
            flex: 1;
            height: 100%;
            .account-age-chart {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>